<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>素材库 - 组件引用</title>
    <link rel="stylesheet" href="./css/element_ui.min.css">
    <!-- <link rel="stylesheet" href="./css/material_library.css"> -->
    <style>
        #app{ padding: 10px 15px;}
        .upload_img{ display:inline-block; width:80px; height:80px; line-height:80px; text-align: center; border:1px dashed #C0C4CC; border-radius: 5px; overflow: hidden; cursor: pointer; transition:all .3s;}
		.upload_img .el-image{ width:100%; height:100%;}
		.upload_img .el-image i{ font-size: 20px; color: #C0C4CC; transition:all .3s;}
		.upload_img:hover{ border-color:#409EFF;}
		.upload_img:hover .el-image i{ color:#409EFF;}
    </style>
</head>
<body>
    <div id="app">
        <div class="upload_img" @click="openML">
            <el-image :src="url" fit="cover">
                <div slot="error">
                    <i class="el-icon-plus"></i>
                </div>
            </el-image>
        </div>
        <material-library :drawer="drawer" :upload-url="upload_url"></material-library>
        <!-- <el-button type="primary">上传图片</el-button> -->
    </div>

<script src="js/vue.min.js"></script>
<script src="js/element_ui.min.js"></script>
<script src="js/material_library.js"></script>
<script>
    var test = new Vue({
        el: '#app',
        data(){
            return {
                upload_url: 'http://laravel.wx60.top/user/upload',
                drawer: false,
                url: ''
            }
        },
        created(){
        },
        methods: {
            openML(){
                this.drawer = true;
            }
        },
        mounted(){
            var _this = this;
            ML.$on('closeML', function(res){
                _this.drawer = false;
                console.log('closeML:', res);
            });
            ML.$on('submit', function(res){
                console.log('submit:', res);
                _this.url = res[0].url;
                _this.drawer = false;
            })
            ML.$on('submitSelect', function(res){
                console.log('submitSelect:', res);
            });
        }
    });
    window.test = test;
</script>
</body>
</html>